import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

/// 证件类型选择弹出框
class IdTypeDialog<T> extends StatelessWidget {
  /// 选项集
  final List<T?> items;

  /// 视图构建器
  final Widget Function(BuildContext context, T? value) itemBuilder;

  /// 选中项
  final T? selectItem;

  /// 无线滚动
  final bool? looping;

  IdTypeDialog({
    Key? key,
    required this.items,
    required this.itemBuilder,
    this.selectItem,
    this.looping,
  }) : super(key: key);

  /// 证件类型弹出
  ///
  /// [items] 选项集
  ///
  /// [builder] 视图构建器
  ///
  /// [selectItem] 选中项
  ///
  /// [looping] 参数决定子列表是否循环并且是否可以循环
  /// 无限滚动。如果设置为true，则滚动到列表末尾
  /// 会将列表循环回到开头。如果设置为false，则列表将
  /// 当到达结尾或开头时，停止滚动。
  ///
  /// ```dart
  /// IdTypeDialog.showIdTypeDialog<String>(
  ///   context,
  ///   selectItem: idType,
  ///   items: credentialsType,
  ///   itemBuilder: (_, String value) {
  ///     return Container(
  ///       alignment: Alignment.center,
  ///       child: Text(
  ///         "$value",
  ///         style: TextStyle(fontSize: 15.0),
  ///       ),
  ///     );
  ///   },
  /// ).then((val) {
  ///   if (val != null) {
  ///     print(val);
  ///   }
  /// });
  /// ```
  static Future showIdTypeDialog<T>(
    BuildContext context, {
    required List<T> items,
    required Widget Function(BuildContext context, T? value) itemBuilder,
    T? selectItem,
    bool? looping,
  }) {
    return showCupertinoModalPopup<T>(
      context: context,
      builder: (BuildContext context) {
        return IdTypeDialog(
          items: items,
          itemBuilder: itemBuilder,
          selectItem: selectItem,
          looping: looping,
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    /// 出生日期
    T? idType;

    return SafeArea(
      child: Container(
        height: MediaQuery.of(context).size.height * 0.4,
        margin: const EdgeInsets.symmetric(
          horizontal: 10.0,
          vertical: 10.0,
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Flexible(
              child: ClipRRect(
                borderRadius: BorderRadius.vertical(
                  top: Radius.circular(12.0),
                ),
                child: CupertinoPicker(
                  scrollController: FixedExtentScrollController(
                    initialItem: items.indexOf(selectItem),
                  ),
                  backgroundColor: Theme.of(context).canvasColor,
                  itemExtent: 30,
                  looping: looping ?? false,
                  onSelectedItemChanged: (index) {
                    idType = items[index];
                  },
                  children: items.map((item) {
                    return itemBuilder(context, item);
                  }).toList(),
                ),
              ),
            ),
            Divider(
              indent: 0.0,
            ),
            Container(
              height: 50.0,
              child: TextButton(
                style: TextButton.styleFrom(
                  backgroundColor: Theme.of(context).canvasColor,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.vertical(
                      bottom: Radius.circular(12.0),
                    ),
                  ),
                ),
                child: Text(
                  '确定',
                ),
                onPressed: () {
                  Navigator.pop(context, idType ?? selectItem);
                },
              ),
            ),
            SizedBox(height: 10.0),
            Container(
              height: 50.0,
              child: TextButton(
                style: TextButton.styleFrom(
                  backgroundColor: Theme.of(context).canvasColor,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(
                      Radius.circular(12.0),
                    ),
                  ),
                ),
                child: Text(
                  '取消',
                ),
                onPressed: () {
                  Navigator.pop(context, null);
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}
